<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>WebRTCPlayer</title>
	<script type="text/javascript" src="./jswebrtc.js"></script>
	<style type="text/css">
		html,
		body {
			text-align: left;
		}

		#video-webrtc {
			width: 800px;
			height: 500px;
		}

		.box {
			display: flex;
		}

		.text-context {
			margin-left: 30px;
		}
	</style>
</head>

<body onload="testUrl()">
	<div class="box">
		<video id="video-webrtc" controls></video>
		<div class="text-context" style="display: none;">
			<table>
				<tr>
					<td>srs：</td>
					<td><input type="text" id="txt_srs">
					</td>
					<td><button onclick="clearSrsUrl()">清除</button></td>
				</tr>
				<tr>
					<td>hdRtcPort：</td>
					<td><input type="text" value="1984" id="txt_hdRtcPort"></td>
					<td><button onclick="clearhdRtcPortUrl()">清除地址</button></td>
				</tr>
				<tr>
					<td>rtcPort：</td>
					<td><input type="text" value="13443" id="txt_rtcPort"></td>
					<td><button onclick="clearhdRtcPortUrl()">清除地址</button></td>
					<td><button onclick="testUrl()">播放</button></td>
				</tr>
				<!-- 		<tr>
						<td>视频流地址：</td>
						<td><input type="text" id="txt_url"></td>
						<td><button onclick="testUrl()">播放</button></td>
						<td><button onclick="clearUrl()">清除地址</button></td>
					</tr> -->

			</table>
		</div>
	</div>
	<div style="display: flex;align-items: center;justify-content: center;margin-top: 20px;">
		<button onclick="testUrl()">播放</button>
	</div>
	<script type="text/javascript">
		function testUrl() {
			// let url = document.getElementById('txt_url').value;
			// if (!url) {
			// 	alert('请输入流地址！')
			// } else {
			var srs = "webrtc://121.61.248.195/live/"+getQueryParam("devicecode");
			var hdrtcport =1984;
			var rtcport = 13443;
			var video = document.getElementById('video-webrtc');
			var player = new JSWebrtc.Player(srs, hdrtcport, {
				video: video,
				autoplay: true,
				rtcPort: rtcport,
				onPlay: (obj) => {
					console.log("start play")
				}
			});
			// }
		}

		function clearUrl() {
			document.getElementById('txt_url').value = ""
		}

		function clearSrsUrl() { }

		function clearhdRtcPortUrl() { }

		function getQueryParam(param) {
			var url = location.href; //获取url中"?"符后的字串
			if (url.indexOf("?") != -1) {
				var str = url.split("?")[1];
				var strs = str.split("&");
				for (var i = 0; i < strs.length; i++) {
					var s = strs[i].split("=");
					if (s[0] == param) {
						return s[1];
					}
				}
			}
			return "";
		}
	</script>
</body>

</html>